g-ugurgul

CSS

CSS (Cascading Style Sheets)

Css internet sayfalarının görünümünü değiştiren bir tanım dosyasıdır. CSS kendine has kuralları olan bir tanım dilidir denilebilir. CSS Sayfa içersindeki her bir elemana ait farklı özellik atamayı sağlar

Css Özellikleri:

• Html sayfasındaki nesnelerin görüntüsünü belirler
• Html 4.0 sürümü ile stil dosyaları geliştirilmiştir
• CSS ayrı bir dosyada *.css uzantısı ile saklanabilir. Bu işlem sayfanın daha hızlı açılmasını sağlar
• Elemanlar üzerinde style="" parametresi ile özel kısa tanımlar yapılabilir

 

HTML ilk üretildiğinde yazı rengi ve boyu gibi özellikleri tag´lar ile tanımlayacağı düşünülmedi. ilk Html sürümünde aşağıdaki gibi temel taglar kullanıldı.

<h1>Başlık yazısı</h1>

<p>Paragraf yazısı</p>

Daha sonra html 3.2 sürümüyle <font> gibi taglar sunulduğundarenk ve yazı boyu gibi alt özellikler gelişmeye başladı. Fakat çok büyük web sayfalarında bu durum tasarımcı için sıkıntılı olmaya başladı. çünkü sonradan doğru tagı bulmak ve değiştirmek zorlaşıyordu.

Bu sorunu çözmek için Dünya internet topluluğu (W3C) html 4.0 sürümü ile CSS yapısını geliştirdi. Böylece boyut ve şekil bilgileri sayfada olmak yerine CSS uzantılı tek bir dosyada toplandı. Bu sayede web tasarımcı sayfanın görünümünü değiştirmek istediğinde tek yapması gereken CSS dosyasını açmaktı. böylece web sayfasında bir anda birçok sayfa değişmiş oluyordu.

------------------------------------------------------------------------------------------------------------/
BASİT CSS ÖRNEĞİ

Aşağıda çok basit bir Html sayfası ve buna uygun CSS örneğini görüyorsunuz. Temel seviye olduğu için CSS dosyası ayrı bir sayfada tutulmak yerine aynı dosyanın başlık kısmında <style></style> tagları arasında tanımlanmıştır.

CSS stilleri yazılırken şu kurala göre yazılır:

eleman-tanımlayıcı { özellik:değeri ; }

 

Aşağıdaki Css örneği başlık yazısının rengini kırmızı yapar:

h1{ color:red}

Bu örneğe uygun bir html sayfası aşağıda gösterilmiştir. Bu kodları Not defterine yapıştırıp farklı kaydet seçeneği ile HTML uzantısı ile kaydedin.

 

Dosyaya çift tıkladığınızda kırmızı yazı ile başlık yazılmış olduğunu göreceksiniz.

ahmet.css isimli dosyada herhangi bir <style> yazısı olması gerekmez. direkt css tanımları yazılır.

---------------------------------------------------------------------------------------------------------------------------------/

Css Relative ve Absolute ilişkisi

Css kullanarak cisimlerin hizalamasını yaparken düşülen hatalarda nbiri absolute ve relative ilişkisidir.','Css öğrenmeye yeni başlayanlar için bilinmesi gereken önemli konulardan biri iç içe iki cismin hizalanması olayıdır.

Örnek: sayfamızda bir çerçeve var diyelim. bu çerçeve içine menü yerleştirmek istiyoruz ama menünün sağa dayalı olmasını istiyoruz. float yapabilirsiniz ama float havada kaldığı için genel yapıya terslik yapar. float yapmadan bunu elde etmenin yolu.

Css dosyası:



.cerceve{ position:relative}

.menu{position:absolute;right:0}



html ise şöyle olacaktır:

<div class="cerceve"><div class="menu"></div></div>

--------------------------------------------------------------------------------------------------------------/

>>Css ile sayfayı ortalamak


DIV ortalamak

Tablo kullanmadan Css ile herhangi bir div bölümünü ortalamak istiyorsanız. margin kullanabilirsiniz.

 

html ise şöyle olur:

<div class="ortala"></div>

 

Yazıyı ortalamak

Yazıyı ortalamak için ise text-align kullanabilirsiniz:

 

Yazıyı bulunduğu yerde düşey olarak ortalamak için ise aşağıdaki gibi lin height kullanıyoruz: örneğin yazı 30px yüksekliğinde bir çerçeve içinde ise, yazı alanı da 30px yapıldığında yazı ortalanır.

 

----------------------------------------------------------------------------------------------------------------/


BURDAN ALINTIDIR.